<template>
  <el-header class="btn-bar">
    <slot></slot>
    <!-- <ElButton v-if="$attrs.pcPattern && $attrs.pattern == 'pc'" type="text" class="color-red">
      <SvgIcon name="computer-red" size="14" />
      PC端模式
    </ElButton>
    <ElButton v-else-if="$attrs.pcPattern" type="text" @click="$emit('pcPattern', 'pc')">
      <SvgIcon name="computer" size="14" />
      PC端模式
    </ElButton>
    <ElButton v-if="$attrs.phonePattern && $attrs.pattern == 'phone'" type="text" class="color-red">
      <SvgIcon name="phone-red" size="14" />
      移动端模式
    </ElButton>
    <ElButton v-else-if="$attrs.phonePattern" type="text" @click="$emit('phonePattern', 'phone')">
      <SvgIcon name="phone" size="14" />
      移动端模式
    </ElButton> -->
    <ElButton type="text" @click="$emit('automaticallyLanguageNum')"> 自动获取多语言编号 </ElButton>
    <ElButton v-if="$attrs.uploadJson" type="text" @click="$emit('uploadJson')">
      <SvgIcon name="upload" size="14" />
      导入JSON
    </ElButton>
    <ElButton v-if="$attrs.clearable" type="text" @click="$emit('clearable')">
      <SvgIcon name="clearable" size="12" />
      清空
    </ElButton>
    <ElButton v-if="$attrs.generateJson" type="text" @click="$emit('generateJson')">
      <SvgIcon name="generate-json" size="10" />
      生成JSON
    </ElButton>
    <!-- <ElButton v-if="$attrs.generateCode" type="text" @click="$emit('generateCode')">
      <SvgIcon name="generate-code" size="12" />
      生成代码
    </ElButton> -->
    <ElButton v-if="$attrs.saveJson" type="text" @click="$emit('saveJson')">
      <SvgIcon name="generate-save" size="12" />
      保存
    </ElButton>
  </el-header>
</template>

<script lang="ts">
  export default defineComponent({
    name: 'CustomHeader',
    emits: [
      'uploadJson',
      'clearable',
      'generateJson',
      'generateCode',
      'saveJson',
      'pcPattern',
      'phonePattern',
      'automaticallyLanguageNum',
    ],
  });
</script>

<style lang="scss" scoped>
  .color-red {
    color: red !important;
    :hover {
      color: red !important;
    }
  }
</style>
